import { useCommon } from "@/store/modules/common";
export const timeStay = async (echarts, dataList) => {

  var chartDom = document.getElementById('point');
  var myChart = echarts.init(chartDom, 'dark');

  let option = {
    title: {
      text: '用户行为数据'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        },
      },
      formatter: (params) => {
        let head = `<span style="font-size:16px;font-weight:700;">模块名称:</span> <span style="color:#ccc;">${params[0].name}</span><br/>`
        let time=''
        let point=''

        if (params.length > 0) {
          params.forEach(e => {
            if (e.seriesType === 'line') {
              time = `<span style="font-size:16px;font-weight:700;">停留时间:</span> <span style="color:#ccc;">${e.value.toFixed(2)}s</span><br/><hr/></span>`
            }
            if (e.seriesType === 'bar') {
              if (e.value !== 0) {
                let _r = e.data.data.reduce((result, product) => {
                  const { tagName, innerText } = product;
                  if (!result[innerText]) {
                    result[innerText] = [];
                  }
                  result[innerText].push({ tagName });
                  return result;
                }, {});
                for (let i in _r) {
                  let name = i
                  let times = _r[i].length
                  point += `<span style="font-size:14px;font-weight:400;color:#85245a">按钮名称:</span> <span style="color:#ccc;">${name}</span>（${times}次）<br/>`
                }
              }
            }
          })
        }
        let html = `
       <div style="width:100%;height:100%;text-align:left;">
          ${head}
          ${time}
          ${point}
        </div>`
        return html
      }
    },
    xAxis: [
      {
        type: 'category',
        data: [],
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '用户点击次数',
        min: 0,
        axisLabel: {
          formatter: '{value} 次'
        }
      },
      {
        type: 'value',
        name: '页面停留时间(秒)',
        min: 0,
        axisLabel: {
          formatter: '{value} s'
        }
      }
    ],
    series: [
      {
        name: '页面停留时间(秒)',
        type: 'line',
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return value + ' s';
          }
        },
        data: []
      },
      {
        name: '次数',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return value + ' 次';
          }
        },
        data: []
      },
    ]
  };


  let store = useCommon();
  const getMap = (result, list) => {
    list.forEach(e => {
      let map = {}
      map.name = e.title
      map.path = e.path
      if (e.children && e.children.length > 0) {
        getMap(result, e.children)
      }
      result.push(map)
    })
    return result
  }
  let mapList = getMap([], store.menuList)
  const getData = () => {
    let timeList = []
    let point=[]
    dataList.forEach(e => {
      timeList.push(e.stayTime / 1000)
      point.push({
        value: e.point.length,
        data: e.point
      })
      if (e.path.includes('login')) {
        e.value = '登录页'
      }
      mapList.forEach(i => {
        if (e.path === i.path) {
          e.value = i.name
        }
      })
    });
    option.xAxis[0].data = dataList
    option.series[0].data = timeList
    option.series[1].data = point
    option && myChart.setOption(option);
  }
  getData()




}
